<template>
  <div class="recharge">
    <h3>充值记录</h3>
    <br>
    <br>
    <hr>
    <div class="demo-date-picker">
        <div class="block">
      <el-date-picker
        v-model="value2"
        type="daterange"
        start-placeholder="2022-11-1"
        end-placeholder="2022-11-8"
        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
      />
      <el-button class="search" type="info">搜索</el-button>

    </div>
    </div>
    <br><br>
    <hr>
    <el-table :data="tableData" style="width: 100%;">
    <el-table-column property="time" label="时间" width="180" align="center" />
    <el-table-column property="money" label="金额" width="260" align="center" />
    <el-table-column property="state" label="状态" width="260" align="center" />
    <el-table-column label="操作" width="200" align="center"  >
        <template #default="scope">
            <button class="button">已付款</button>
            <button class="button">未付款</button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination  class="paging" background layout="prev, pager, next"  :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange" />

  </div>
</template>

<script>
  import {getRecharge} from '@/api/user'

export default {
  name: 'recharge',
    data(){
        return{
            value2:[new Date(2010, 9, 1), new Date(2010, 10, 1)],
            tableData:[
        {
          time:'2017',
          money:'500元',
          state:'已付款',
        },
      ],
      total: 1,
      pageSize: 5,
        }
    },
    methods:{
      // 分页切换
      pageChange(page) {
            this.recharGe(page)
        },
        // 请求配送记录数据
        async recharGe(page=1) {
            const res = await getRecharge(page)
            console.log(res)
            //@ts-ignore
            const {list,total,pageSize} = res
            this.tableData = list
            this.total = total
            this.pageSize = pageSize
        }
    },
    created() {
        this.recharGe()
    },
    }

</script>

<style lang="less" scoped>
.recharge h3 {
  font-size: 18px;
  font-weight: 600;
  float: left;
  padding-left: 20px;
}

  .demo-date-picker {
  float: left;
  margin-left: 20px;
}

.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.search{
    margin-left: 50px;
    margin-bottom: 6px;
    border-radius: 0;
  }
.button {
    width: 76px;
    height: 32px;
    border: none;
    margin-left: 10px;
    background-color:#d7d7d7;
}
.paging {
    margin-top: 50px;
    margin-left: 450px;
    
  }
</style>
